<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- accept 限制 打开上传文件窗口只显示哪里文件
        multiple可选择多张图片
    -->
    <input type="file" accept="image/*" multiple id='fileUpload' name="" id="">
    <!-- 缩略图 -->
    <img src="" alt="" id='priview'>

    <script>
        fileUpload.onchange = function () {

            //this.files是一个类数组
            console.log(this.files)

            let file = this.files[0]
            if (!file) return
            if (file.sizde > 1024) {
                alert('必须1kb以内')
                return
            }
            if (!/(jpg|png|gif|png)/i.test(file.type)) {
                alert('必须上传图片格式')
                return
            }

            //缩略图
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function (ev) {
                priview.src = ev.target.result
            }

            // 上传文件到服务器 
            // 第一种fromData
            let formData = new FormData()
            formData.append('file', file)
            formData.append('fileName', file.name)
            // 传递给服务器的header必须是 Content-Type:multipart/from-data

            //第二种将文件base64传递给服务器

            function fileReader(file) {
                return new Promise(resolve => {
                    let reader = new FileReader
                    reader.readAsDataURL(file)
                    reader.onload = ev => {
                        resolve(ev.target.result)
                    }
                })
            }
            let base64 = await fileReader(file)
            // 再将变量base64转成qs格式
            // 传递给服务器的header必须是 Content-Type:application/x-www.form---urlencode



        }
    </script>
</body>

</html>